<template>
  <div class="all">
    <div class="recommend">
      <!-- 背景 -->
      <div class="background">
        <div class="left">
          <img :src="topList.coverImgUrl" alt="" width="200px;" height="200px">
        </div>
        <div class="right">
          <button>精品歌单</button>
          <h2>{{ topList.name }}</h2>
          <div class="inner">{{ topList.description }}</div>
        </div>
      </div>
    </div>
    <div class="tab_bar">
       <span class="item" :class='{active:tag=="全部"}' @click="tag='全部'">全部</span>
      <span class="item" :class='{active:tag=="欧美"}' @click="tag='欧美'">欧美</span>
      <span class="item" :class='{active:tag=="流行"}' @click="tag='流行'">流行</span>
      <span class="item" :class='{active:tag=="说唱"}' @click="tag='说唱'">说唱</span>
      <span class="item" :class='{active:tag=="摇滚"}' @click="tag='摇滚'">摇滚</span>
      <span class="item" :class='{active:tag=="民谣"}' @click="tag='民谣'">民谣</span>
      <span class="item" :class='{active:tag=="电子"}' @click="tag='电子'">电子</span>
      <span class="item" :class='{active:tag=="轻音乐"}' @click="tag='轻音乐'">轻音乐</span>
      <span class="item" :class='{active:tag=="影视原声"}' @click="tag='影视原声'">影视原声</span>
      <span class="item" :class='{active:tag=="ACG"}' @click="tag='ACG'">ACG</span>
      <span class="item" :class='{active:tag=="怀旧"}' @click="tag='怀旧'">怀旧</span>
      <span class="item" :class='{active:tag=="旅行"}' @click="tag='旅行'">旅行</span>
      <span class="item" :class='{active:tag=="治愈"}' @click="tag='治愈'">治愈</span>
    </div>
   <div class="new_box">
      <div class="list" v-for="(item,index) in list" :key="'list'+index">
      <div class="msg">
       <div class="span"><span>{{ item.playCount }}</span></div>
        <!-- 播放量 -->
        <img :src="item.coverImgUrl" alt=""  width="200px;" height="200px">
        <p>{{ item.name }}</p>
        <!-- <div class="position">
        <div class="new_play"><img src="../../Data/播放.png" alt="" width="50px" height="50px;"></div>
      </div> -->
      </div>
      <!-- 播放按钮 -->
    </div>
   </div>
   <!-- 分页器
   total:总条数
   current-page 当前页
   page-size 每页多少数据
    -->
    <el-pagination 
    @current-change="handleCurrentChange"
    background layout="prev, pager, next" :total="total" 
    :current-page="page"
    :page-size="10"
    >
    </el-pagination>
  </div>
</template>

<script>
//导入axios
import axios from 'axios'
export default {
  data() {
    return{
      //总条数
      total:0,
      // 页码
      page:1,
      // 顶部的推荐歌单
      topList:[],
      // 歌单列表
      list: [],
      // 当前选中的数据
      tag: "全部"
    }
  },
  // 侦听器
  watch: {
    tag() {
      // console.log(1111)
    this.topData(),
    // 歌单列表
    this.listData()
    // 在侦听器中修改页码为1
    this.page = 1
    }
  },
  created() {
    // 顶部的精品歌单
    this.topData(),
    // 歌单列表
    this.listData()
  },
  methods: {
    topData() {
      axios({
      url: 'https://autumnfish.cn/top/playlist/highquality',
      method: 'get',
      params:{
        limit: 10,
        cat: this.tag
      }
    }).then(res => {
      // console.log(res);
      // 保存总的条数
      this.total = res.data.total
      // 保存数据
      this.topList = res.data.playlists[0]
    })
    },
    listData() {
       axios({
      url: 'https://autumnfish.cn/top/playlist',
      method: 'get',
      params: {
        limit: 10,
        // 起始的值（页码-1）*每页多少条数据10
        offset: (this.page-1)*10,
        cat: this.tag
      }
    }).then(res => {
      // console.log(res)
      this.list = res.data.playlists
      // 将数据赋值给歌单列表
    })
    },
    // 页码改变事件
    handleCurrentChange(val) {
      console.log(`当前页:${val}`)
      // 保存页码
      this.page = val
      // 重新获取数据
      this.listData()
    }
  }
}
</script>

<style>
.tab_bar{
  text-align:right;
  padding-right:10%;
  padding-bottom:5%;
}
.active{
  color:red;
}
.tab_bar .item{
  margin-left:2%;
  cursor: pointer;
}
.new_box{
  width: 80%;
  position:relative;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  padding-left:10%;
}
.list{
  width: 20%;
  text-align:center;
  margin-bottom:5%;
}
.msg img{
  width: 100%;
  margin-left:10%;
}
.new_play{
  z-index:1;
}
.list .span{
  height: 50px;
  background-color: gray;
  width: 100%;
  margin-left:10%;
  position:absolute;
  top:0;
  left:0;
}
/* .position .new_play{
  position:absolute;
  top:30%;
  left:50%;
} */
.msg{
  width: 80%;
  position:relative;
}
.list .span{
  display:none;
}
.list:hover .span{
  display:block;
}
.list .new_play{
  display:none;
}
.list:hover .new_play{
  display:block;
}
.list p{
  /* width: 20%; */
  text-align:center;
}
.el-pagination{
  margin-left:35%;
  clear:both;
  margin-bottom:10%;
}
.all{
  overflow:scroll;
  height: 620px;
}
.recommend {
  width: 100%;
  padding: 0 10%;
  margin-bottom: 50px;
}
.left{
  padding:2%;
}
.background{
  width:80%;
  background-color:gray;
  height: 350px;
}
.background .left,.right{
  float:left;
}
.right button{
  margin-bottom:1%;
  margin-top:1%;
}
.right h2{
  color:white;
}
.right .inner{
  width: 600px;
  /* overflow:scroll; */
  margin-top:-3%;
  font-size:10px;
}
</style>
